<template>
  <!-- 转正申请 -->
  <div class="content" :key="route.fullPath">
    <div class="elTable">
      <!-- 表格 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="tab in tabs"
          :key="tab.label"
          :label="tab.label"
          :name="tab.label"
        >
          <div class="tabInfo">
            <div class="search">
              <SearchForm
                :formObj="formObj"
                :formData="searchForm"
                :tip="tip"
              ></SearchForm>
            </div>
            <!-- <TabTable
              class="tabTable"
              altitude="10"
              :column="column"
              :tableData="regularData"
              :pagination="pagination"
              @sizeChange="sizeChange"
              @currentChange="currentChange"
            > -->

            <el-table
              class="tabTable"
              :data="regularData"
              style="width: 100%"
              altitude="10"
            show-overflow-tooltip

            >
              <!-- 基础信息列 -->
              <el-table-column prop="name" label="姓名" align="center" />
              <el-table-column label="性别" align="center">
                <template #default="{ row }">
                  <div>{{ row.sex === 0 ? "男" : "女" }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="educationalBackground"
                label="学历"
                align="center"
              />
              <el-table-column prop="profession" label="专业" align="center" />
              <el-table-column label="入职部门" align="center">
                <template #default="{ row }">
                  {{ setDeptName(row.deptId) }}
                </template>
              </el-table-column>
              <el-table-column prop="jobName" label="岗位名称" align="center" />
              <el-table-column
                prop="becomeJoinTime"
                label="入职日期"
                align="center"
              />
              <el-table-column
                prop="trialPeriodExpiresTime"
                label="试用期到期日期"
                align="center"
              />
              <el-table-column label="创建人" align="center">
                <template #default="{ row }">
                  {{ setName(row.createId) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                align="center"
              />

              <!-- 动态操作列 -->
              <el-table-column
                label="操作"
                :width="tip === '审批中' ? '100px' : '130px'"
              >
                <template #default="{ row }">
                  <div class="operations">
                    <!-- 待转正状态 -->
                    <template v-if="tip === '待转正'">
                      <el-button
                        text
                        type="info"
                        size="small"
                        @click="handleInfo(row, '待转正查看')"
                      >
                        查看
                      </el-button>
                      <el-button
                        text
                        type="info"
                        size="small"
                        class="other-btn"
                        @click="handleRegular(row)"
                        v-hasPermi="['system:info:application']"
                      >
                        转正申请
                      </el-button>
                    </template>

                    <!-- 审批中状态 -->
                    <template v-if="tip === '审批中'">
                      <el-button
                        text
                        type="info"
                        size="small"
                        @click="handleApproveInfo(row, '查看')"
                      >
                        查看
                      </el-button>
                      <el-button
                        text
                        type="info"
                        size="small"
                        class="other-btn"
                        @click="handleApproveInfo(row, '审批')"
                        v-hasPermi="['system:info:sbumit']"
                      >
                        审批
                      </el-button>
                    </template>

                    <!-- 已完成状态 -->
                    <template v-if="tip === '转正结束'">
                      <el-button
                        text
                        type="info"
                        size="small"
                        @click="handleEndInfo(row)"
                      >
                        查看
                      </el-button>
                    </template>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <Pagination
              style="margin-top: 20px"
              :total="pagination.total"
              :page="pagination.page"
              :limit="pagination.limit"
              :pageSizes="pagination.pageSizes"
              @handleSizeChange="sizeChange"
              @handleCurrentChange="currentChange"
            ></Pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import SearchForm from "@/components/searchForm/index.vue";
import TabTable from "@/components/Table/tabTable.vue";
import { searchDepyList } from "@/api/recruitment/jobApplication/index.js";
import { seachPersonList } from "@/api/recruitment/needWorkers/index.js";
import { regularList } from "@/api/employeeRelations/regular.js";
import { reactive, ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import Pagination from "@/components/Pagination/pageination.vue";
const router = useRouter();
const route = useRoute();
// 标签页
const activeName = ref("待转正");
// 查看切换
const tip = ref("待转正");

const tipVal = ref(2);
const tabs = reactive([
  {
    label: "待转正",
  },
  {
    label: "审批中",
  },
  {
    label: "转正结束",
  },
]);
// 查人
const requireProposerOptions = reactive([]);
// 部门
const buIdOptions = reactive([]);

// 初始搜索表单数据
const initialSearchForm = {
  buId: "",
  jobName: "",
  name: "",
  status: 0,
  pageSize: 10,
  pageNum: 1,
};
const searchForm = reactive({ ...initialSearchForm });

// 搜索
const formObj = reactive({
  item: [
    {
      input: true,
      label: "",
      prop: "jobName",
      placeholder: "请输入岗位名称",
      disabled: false,
    },
    {
      select: true,
      label: "",
      prop: "buId",
      placeholder: "请选择入职部门",
      disabled: false,
      options: buIdOptions,
    },
    {
      input: true,
      label: "",
      prop: "name",
      placeholder: "请输入姓名",
      disabled: false,
    },
  ],
  btn: [
    {
      type: "primary",
      name: "搜索",
      className: "el-button-primary",
      clickFun: () => {
        handleQuery();
      },
    },
    {
      type: "primary",
      name: "重置",
      className: "el-button-primary",
      clickFun: () => {
        resetTabState();
      },
    },
  ],
});
// 转正数据
const regularData = ref([]);
const pagination = ref({
  total: 0,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 30, 50],
});
// 重置搜索表单、表格数据和分页信息
const resetTabState = () => {
  searchForm.buId = initialSearchForm.buId;
  searchForm.jobName = initialSearchForm.jobName;
  searchForm.name = initialSearchForm.name;
  searchForm.pageSize = initialSearchForm.pageSize;
  searchForm.pageNum = initialSearchForm.pageNum;
  regularData.value = [];
  pagination.value = {
    total: 0,
    page: 1,
    limit: 10,
    pageSizes: [10, 20, 30, 50],
  };
  getList();
};

onMounted(() => {
  getDemandDetailsList();
  seachPersonsList();
  getList();
});
const handleQuery = () => {
  getList();
};

// 人
const seachPersonsList = async () => {
  // BMLD
  const res2 = await seachPersonList({
    roleKey: "",
  });
  if (res2.rows.length > 0) {
    res2.rows.map((item) => {
      let label = item.userName;
      let value = item.userId;
      requireProposerOptions.push({
        label,
        value,
      });
    });
  }
};
// 部门
const getDemandDetailsList = async () => {
  // 搜索部门
  const { data } = await searchDepyList();
  if (data.length > 0) {
    data.map((item) => {
      let label = item.deptName;
      let value = item.deptId;
      buIdOptions.push({
        label,
        value,
      });
    });
  }
};
const setDeptName = (deptId) => {
  if (buIdOptions.length > 0) {
    const dept = buIdOptions.find((item) => item.value == deptId);
    return dept ? dept.label : "";
  }
  return "";
};
const setName = (creatId) => {
  if (requireProposerOptions.length > 0) {
    const person = requireProposerOptions.find((item) => item.value == creatId);
    return person ? person.label : "";
  }
  return "";
};
const getList = () => {
  searchForm.status = tipVal.value;
  regularList(searchForm).then((res) => {
    if (res.data.records.length > 0) {
      regularData.value = res.data.records;
      pagination.value.total = res.data.total;
    } else {
      regularData.value = [];
      pagination.value.total = 0;
    }
  });
};
// 切换标签页
const handleClick = (tab, event) => {
  const tipMap = new Map([
    ["待转正", 2],
    ["审批中", 3],
    ["转正结束", 4],
  ]);
  tip.value = tab.props.name;
  tipVal.value = tipMap.get(tip.value);
  // 重置状态
  resetTabState();
};

// 审批\查看
const handleApproveInfo = (row, text) => {
  console.log(text.value, "查看");
  router.push({
    name: "regularView",
    query: {
      id: row.id,
      text: text,
      workFlow: 1,
    },
  });
};
// 入职管理 addOnboarding
const handleRegular = (row) => {
  console.log("入职管理", row);
  router.push({
    name: "addRegular",
    query: {
      id: row.id,
    },
  });
};

// 转正查看
const handleInfo = (row, text) => {
  router.push({
    name: "regularView",
    query: {
      isApprove: false,
      isApproveBtn: false,
      id: row.id,
      text: text,
    },
  });
};

// 转正结束
const handleEndInfo = (row) => {
  console.log(row, "转正结束");
  router.push({
    name: "regularView",
    query: {
      id: row.id,
      workFlow: 1,
      text: "查看",
    },
  });
};

const sizeChange = (size) => {
  pagination.value.limit = size.limit;
  searchForm.pageSize = size.limit;
  getList();
};
const currentChange = (page) => {
  pagination.value.page = page.page;
  searchForm.pageNum = page.page;
  getList();
};
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
